import React, {Component} from 'react';
import {
    Flex,
    Button,
    Icon
} from 'antd-mobile';
import { filter_item } from './filter.less';

class Filter extends Component {
      constructor(props){
          super(props);
          this.state={
              open:false,
          }
      }

    openClick = () =>{
        this.setState({
            open:!this.state.open
        })
    }

    componentDidMount(){
        let {  specValueList=[] } = this.props.spec;
        let hasChecked= specValueList.some((v,i,a)=>{
            return v.checked==true
        })
        if(hasChecked==true){
            this.setState({
                open:true
            })
        }
    }

    changeSpecCheck = ( sonIndex, check ) => {
        let { dispatch, index } = this.props ;
        dispatch({ type:"goodsearch/changeSpecCheck", index, sonIndex, check });
    }


    render() {
        let { spec, dispatch } = this.props;
        let { open } = this.state;
        let { name, specValueList=[] } = spec;
        let newSpecValueList = open==false ? specValueList.slice(0,3) : specValueList;
console.log(spec)
        return (
            <div className={filter_item}>
                <div>
                    <Flex justify="between" className="item_title">
                        <div>{name}</div>
                        {
                            specValueList.length > 3 ?
                                <Icon onClick={this.openClick} type={open == false ? "down" : "up"}/> : ''
                        }
                    </Flex>

                    <Flex wrap="wrap" justify="between">
                        {
                            newSpecValueList.map((value, i) => {
                               // console.log(value, "vallue");
                                return (
                                    <div key={i}
                                         style={value.check == true ? {backgroundColor: "#ff0036", color: "#fff"} : {}}
                                         className='spec_value text-overflow-hidden'
                                         onClick={() => this.changeSpecCheck(i, value.check == true ? false : true)}
                                    >
                                        {value.name}
                                    </div>
                                )
                            })
                        }
                    </Flex>
                </div>
            </div>
        );


    }
}

export default Filter;
